import React, { Component } from 'react'
import {Route,Switch,Redirect} from 'react-router-dom'
import './App.css'
import Home from './pages/Home'
import About from './pages/About'
import MyNavLink from './components/MyNavLink'
import Header from './components/Header'
/* 
    这个小节的内容很简单，就是讲路由组件的prop参数传递中的search参数传递
    这种方式写起来也很简单，但是需要在 Link 标签中定义好key=value形式参数拼接
    然后在实际的组件中，直接从prop属性中获取，调用querystring(或者其他处理字符串转对象的函数库)处理参数，并封装成对象返回即可
    
*/
export default class App extends Component {


    render() {
        return (
            <div>
                <div className="row">
                    <Header/>
                </div>
                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">
                            {/* 
                            使用Link标签代替 a 标签，这一步是用于实现第一步：浏览器URL的变更
                            */}
                            <MyNavLink to="/about">About</MyNavLink>
                            <MyNavLink to="/home">Home</MyNavLink>
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">
                                <Switch>
                                <Route  path="/about" component={About}/>
                                <Route  path="/home" component={Home}/>
                                <Redirect to="/about" />
                                </Switch>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
